<template>
	<view class="staff-info">
		<view class="icon">
			<uv-avatar :src="info.resume_avatar || getIconPath('avatar.png')" size="50"
				customStyle="margin-right:10px" />
		</view>
		<view class="lbl-info">
			<view class="staff-name">{{info.real_name}}</view>
			<view class="staff-desc">{{info.gender}} | {{info.age}}岁 | {{info.region}}</view>
		</view>
	</view>
	<uv-line color="#EEEEEE" />
	<view class="state">
		<view class="state-item">
			<view class="state-name">{{info.experience_years}}年</view>
			<view class="state-desc">服务经验</view>
		</view>
		<view class="state-item">
			<view class="state-name">234单</view>
			<view class="state-desc">累计服务</view>
		</view>
		<view class="state-item">
			<view class="state-name">100%</view>
			<view class="state-desc">好评率</view>
		</view>
	</view>
	<uv-line color="#EEEEEE" />
	<view class="state">
		<uv-text text="用户评价" size="28upx" bold="true" />
		<uv-text :text="'共'+total+'条评价'" size="20upx" align="right" />
	</view>
	<scroll-view scroll-y="true" style="height:500px;">
		<view class="card" v-for="item in list">
			<view class="user-info">
				<view class="icon">
					<uv-avatar :src="item.avatar || getIconPath('avatar.png')" size="30"
						customStyle="margin-right:10px" />
				</view>
				<view class="lbl-info">
					<view class="user-name">{{item.nickname}}</view>
					<view class="user-time">{{item.create_time}}</view>
				</view>
			</view>
			<view class="content">
				<uv-text :text="item.content" size="12" color="#333" />
			</view>
			<uv-album :urls="item.images" singleSize="80" multipleSize="60"></uv-album>
			<uv-gap height="10" bgColor="transparent" v-if="item.images.length>0"/>
			<uv-line color="#EEEEEE" />
		</view>
	</scroll-view>
	<uv-gap height="70" bgColor="transparent" />
	<view class="pop-bottom">
		<uv-button text="打赏师傅" type="error" plain style="width:40%" @click="giveReward" />
		<uv-button text="联系师傅" color="#C52923" style="width:40%" @click="dialContact" />
	</view>
	<uv-popup ref="popContactRef" mode="bottom" round="10" closeable>
		<view class="popup-content" style="width: 300px;">
			<uv-text text="联系服务人员" bold="true" size="15"></uv-text>
			<uv-gap height="20" bgColor="transparent" />
			<view class="tips">为保护您的隐私，您的号码将被加密后呼出，请确认以下使用的是<span color="#ff0000">本机号码</span>，非本机号码请点击修改</view>
			<uv-gap height="20" bgColor="transparent" />
			<uv-text :text="info.tel" size="15" bold="true" align="center"></uv-text>
			<uv-gap height="20" bgColor="transparent" />
			<view style="background-color: #f2f2f2;padding:10px;">
				<uv-text text="1.如果您是双卡双待手机，请确认拨打使用号码和上面一致" size="10" block></uv-text>
				<uv-text text="2.为保证服务质量，您的电话可能会被录音" size="10" block></uv-text>
			</view>
			<uv-gap height="20" bgColor="transparent" />
			<view class="confirmbtn">
				<uv-button text="立即呼叫" color="#C52923" style="width:80%" @click="contactService" />
			</view>
		</view>
	</uv-popup>
	<uv-popup ref="popTippingRef" mode="bottom" round="10" closeable>
		<view class="popup-content" style="width: 300px;">
			<uv-text text="打赏服务人员" bold="true" size="15px"></uv-text>
			<uv-gap height="10" bgColor="transparent" />
			<uv-text type="info" text="打赏将全部转给服务人员，平台不收取任何费用" size="12"></uv-text>
			<uv-gap height="20" bgColor="transparent" />
			<view class="tip-slots">
				<view v-for="item in tippingList" class="tip-slot" :class="{'selected': item === tipping }" @click="selectTip(item)">
					{{ item }}元
				</view>
			</view>
			<uv-gap height="20" bgColor="transparent" />
			<view class="confirmbtn">
				<uv-button text="确认打赏" color="#C52923" style="width:80%" @click="confirmTipping" />
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import {
		ref, onMounted
	} from 'vue';
	import {
		getIconPath
	} from '@/util';
	import {
		getTechnicianInfo,
		getTecComment
	} from '@/api'
	import {
		onReachBottom,
	} from '@dcloudio/uni-app'
	const popContactRef = ref(null);
	const popTippingRef = ref(null);
	const props = defineProps({
		tecId: {
			type: Number,
			default: 8
		}
	})
	const page = ref(1)
	const list = ref([])
	const total = ref(0)
	const finished = ref(false)
	const info = ref({
		"id": 8,
		"real_name": "测试真实姓名",
		"tel": "17705575688",
		"id_card_number": "342221199207167019",
		"resume_avatar": "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0722/cea64202507221056261728.webp",
		"experience_years": "10",
		"region": "砀山",
		"age": 33,
		"gender": "男"
	});
	const tipping = ref(5)
	const tippingList = ref([2, 5, 10])
	const dialContact = () => {
		popContactRef.value.open();
	}
	const getCommentList = async () => {
		finished.value = false;
		if (page.value === 1) list.value = []
		const {
			result
		} = await getTecComment({
			page: page.value,
			limit: 10,
			technician_id: props.tecId,
		})
		page.value++
		total.value = result.total
		list.value = [...list.value, ...result.data]
		finished.value = list.value.length >= result.total;
	}
	onMounted(async() => {
		info.value = (await getTechnicianInfo({
			technician_id: props.tecId
		})).result
		getCommentList()
	});
	onReachBottom(() => {
		if (finished.value) return
		getCommentList()
	})
	const contactService = () => {
		popContactRef.value.close();
		uni.makePhoneCall({
			phoneNumber: info.value.tel
		})
	}
	const giveReward = () => {
		popTippingRef.value.open();
	}
	const selectTip = (e) => {
		tipping.value = e;
	};
	const confirmTipping = () => {
		popTippingRef.value.close();
	}
</script>

<style lang="scss" scoped>
	.staff-info {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.icon {
			margin: 15px 10px;
		}

		.staff-name {
			font-size: 16px;
			font-weight: 600;
			margin-right: 8px;
			display: flex;
			align-items: center;
		}

		.staff-desc {
			color: #979797;
			font-size: 12px;
			display: inline-block;
		}

		.lbl-info {
			display: flex;
			flex-direction: column;
		}
	}

	.state {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;

		.state-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.state-name {
				font-size: 16px;
				color: #333;
			}

			.state-desc {
				font-size: 12px;
				color: #979797
			}
		}
	}

	.card {
		padding: 10px 20px;
	}

	.user-info {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.icon {
			margin: 10px 10px 10px 0;
		}

		.user-name {
			font-size: 14px;
			font-weight: 500;
			margin-right: 8px;
			display: flex;
			align-items: center;
		}

		.user-time {
			color: #979797;
			font-size: 12px;
			display: inline-block;
		}

		.lbl-info {
			display: flex;
			flex-direction: column;
		}
	}

	.content {
		padding: 10px 0;
	}

	.tips {
		font-size: 12px;
		color: #666;
	}

	.popup-content {
		padding: 30upx 0;
		margin: 0 auto;

		.confirmbtn {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.tip-slots{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
	
	.tip-slot {
		position: relative;
		padding: 10px 5px;
		background: white;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		text-align: center;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.2s;
	}
	
	.tip-slot.selected {
		background-color: #fbd9dc;
		color: #333;
		border-color: #eb3644;
	}

	.pop-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 15px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>